## [1.12. HTML5-аудио](https://html5book.ru/html5-audio/)

### 1. Элемент \<audio>

#### АТРИБУТЫ ТЕГА \<AUDIO>

<table class="t3">
<caption>Таблица 1. Атрибуты тега &lt;audio&gt;</caption>
<tbody><tr>
<th style="width:20%">Атрибут</th>
<th>Описание, принимаемое значение</th>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>autoplay</kbd></td>
<td>Автоматическое воспроизведение аудио файла сразу же после загрузки страницы.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>controls</kbd></td>
<td>Указывает браузеру, что нужно отобразить базовые элементы управления воспроизведением (начинать и останавливать воспроизведение, переходить в другое место записи, регулировать громкость).</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>loop</kbd></td>
<td>Циклическое воспроизведение аудио файла.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>muted</kbd></td>
<td>Выключает звук при воспроизведении аудио файла.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>preload</kbd></td>
<td>Атрибут, отвечающий за предварительную загрузку аудио контента. Не является обязательным, некоторые браузеры игнорируют его. Возможные значения:<br>
<kbd>auto</kbd> — браузер загружает аудио файл полностью, чтобы он был доступен, когда пользователь начнет его воспроизведение.<br>
<kbd>metadata</kbd> — браузер загружает первую небольшую часть аудио файла, чтобы определить его основные характеристики.<br>
<kbd>none</kbd> — отсутствие автоматической загрузки аудио файла.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>src</kbd></td>
<td>Содержит абсолютный или относительный URL-адрес аудио файла.</td>
</tr>
</tbody></table>

### 2. Аудио кодеки
### 3. Альтернативные медиа-ресурсы \<source>

#### АТРИБУТЫ ТЕГА \<SOURCE>

<table class="t3">
<caption>Таблица 2. Атрибуты тега &lt;source&gt;</caption>
<tbody><tr>
<th style="width:20%">Атрибут</th>
<th>Описание, принимаемое значение</th>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>media</kbd></td>
<td>Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>src</kbd></td>
<td>Содержит абсолютный или относительный URL-адрес медиафайла.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>type</kbd></td>
<td>Определяет MIME-тип медиафайла.</td>
</tr>
</tbody></table>

### 4. Добавление субтитров и заголовков \<track>

#### АТРИБУТЫ ТЕГА \<TRACK>

<table class="t3">
<caption>Таблица 3. Атрибуты тега &lt;track&gt;</caption>
<tbody><tr>
<th style="width:20%">Атрибут</th>
<th>Описание, принимаемое значение</th>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>default</kbd></td>
<td>Указывает, что данная дорожка воспроизводится по умолчанию. Только один элемент <kbd>&lt;track&gt;</kbd> может содержать данный атрибут.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>kind</kbd></td>
<td>Указывает тип текстовой дорожки, по умолчанию выводятся субтитры (<kbd>subtitles</kbd>). Принимаемые значения:<br>
<kbd>captions</kbd> — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей).<br>
<kbd>chapters</kbd> — добавляет названия глав в виде списка для навигации по медиафайлу.<br>
<kbd>descriptions</kbd> — добавляет звуковое описание происходящего в видео (для слепых пользователей).<br>
<kbd>metadata</kbd> — метаданные, используемые скриптами, не отображаются для пользователей.<br>
<kbd>subtitles</kbd> — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>label</kbd></td>
<td>Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>src</kbd></td>
<td>Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.</td>
</tr>
<tr>
<td style="color:#38BAC7"><kbd>srclang</kbd></td>
<td>Язык воспроизводимой дорожки.</td>
</tr>
</tbody></table>

### [5. Стилизованный пример аудио плеера](https://codepen.io/nazarelen/pen/rrOgBw)

